var courseTab = (function ($, initTools) {
  //节点对象
  var $courseTab = $('.J_courseTab'),
    $listWrapper = $('.J_listWrapper'),
    $tabList = $courseTab.find('.tab-item-list'),
    $courseList = $listWrapper.find('.course-card-list');

  //模板
  var tabItemTpl = $('#J_tabItemTpl').html(),
    cardTpl = $('#J_cardTpl').html();

  //数据
  var courseData = JSON.parse($('#J_courseData').html()),
    courseFieldData = JSON.parse($('#J_courseFieldData').html());

  var field = 'all',
    htmlCache = {};


  var init = function () {
    render();
    bindEvent();
  }

  function render() {
    $tabList.html(renderTap(courseFieldData));
    $courseList.html(renderList(courseData));
  }

  //renderList是需要复用的，所以传入data形成参数
  function renderTap(data) {
    var list = '';
    list += initTools.tplReplace(tabItemTpl, {
      styleClass: 'tab-item-lk lk-current',
      field: 'all',
      fieldName: '全部'
    });

    data.forEach(function (item, index) {
      list += initTools.tplReplace(tabItemTpl, {
        styleClass: 'tab-item-lk',
        field: item.field,
        fieldName: item.field_name
      });
    });
    return list;
  }

  //renderList是需要复用的，所以传入data形成参数
  function renderList(data) {
    if (!htmlCache[field]) {
      var list = '';
      data.forEach(function (item) {
        list += initTools.tplReplace(cardTpl, {
          id: item.id,
          courseName: item.course_name,
          price: item.price,
          img: item.img
        });
      });
      htmlCache[field] = list;
      console.log('from renderList');
    } else {
      console.log('from cache');
    }
    return htmlCache[field]
  }

  function bindEvent() {
    $courseTab.on('click', '.tab-item-lk', onTabClick);
  }

  function onTabClick() {
    //包装成jQuery对象
    var $this = $(this),
      index = $this.parent('.tab-item').index();
    field = $this.attr('data-field');
    tabChange($this);
    pageChange(field);
  }

  function tabChange(target) {
    target.addClass('lk-current')
      .parent('.tab-item')
      .siblings()
      .children('.tab-item-lk')
      .removeClass('lk-current');
  }

  function pageChange(field) {
    const data = _filterData(field);
    $courseList.html(renderList(data));
  }

  function _filterData(field) {
    return courseData.filter(function (item) {
      if (field == 'all') {
        return true;
      }
      return item.field === field;
    })
  }

  return {
    init: init
  }
})(jQuery, initTools);